<script setup lang="ts">

</script>

<template>
    <div class="left-Top">
        <div class="left-Top-img">
            <span style="padding: 10px; color: aliceblue; font-size: 1.5rem; line-height: 3rem;">设备统计</span>
        </div>
        <div class="left-Top-bottom">
            <div class="left-Top-bottom-left"></div>
            <div class="left-Top-bottom-cen"></div>
            <div class="left-Top-bottom-right"></div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.left-Top {
    width: 28rem;
    height: 10rem;
    margin: 6rem 6rem;
    background-color: rgb(16, 29, 91);

    &-img {
        width: 100%;
        height: 3rem;
        background: url('../../assets/images/leftImg.png') no-repeat center center;
        background-size: 100% 100%;
    }

    &-bottom {
        width: 100%;
        height: 7rem;
        margin-top: 2rem;
        background-color: rgb(29, 46, 107);
        display: flex;

        >div {
            flex: 1;
        }

        &-left {
            background: url('../../assets/images/left-top-1.png') no-repeat center center;
            background-size: 60% 80%;
        }

         &-cen {
            background: url('../../assets/images/left-top-2.png') no-repeat center center;
            background-size: 60% 80%;
        }

         &-right {
            background: url('../../assets/images/left-top-3.png') no-repeat center center;
            background-size: 60% 80%;
        }
    }
}
</style>